import Vue from 'vue'
import XEUtils from 'xe-utils'
import VXETable from 'vxe-table'

import MyInput from "@/components/vueForm/myInput.vue";
import MyInputNumber from "@/components/vueForm/myInputNumber.vue";
import MySelectTree from "@/components/vueForm/mySelectTree.vue";
import MySelect from "@/components/vueForm/mySelect.vue";
import MyCheckbox from "@/components/vueForm/myCheckbox.vue";
import MyRadio from "@/components/vueForm/myRadio.vue";
import MyAutoComplete from "@/components/vueForm/myAutoComplete.vue";
import MySwitch from '@/components/vueForm/mySwitch.vue'
import MyDatePicker from "@/components/vueForm/myDatePicker.vue";
import MyQuarterDatepicker from "@/components/vueForm/myQuarterDatepicker.vue";
import MyIcon from "@/components/vueForm/myIcon.vue";

/**
 * 渲染器，针对不同类型进行不同处理
 */

// 创建input渲染器
VXETable.renderer.add('myInput', {
  renderEdit(h, renderOpts, { row, column }) {
    return [
      <MyInput
        ref={'inputRef_' + column.property + '_' + renderOpts.props.which}
        which={renderOpts.props.which}
        modelKey={column.property}
        model={row[column.property]}
        config={renderOpts.props.colConfig}
        disabled={renderOpts.props.colConfig.isDisabled}
        onChangeCallback={(key, val) => {
          // 仅在输入框失去焦点或用户按下回车时触发
          row[column.property] = val;
          renderOpts.events.change(row, column, key, val)
        }}
        onFocusCallback={(key, val) => {
          //在 Input 获得焦点时触发
          row[column.property] = val;
          renderOpts.events.focus(row, column, key, val)
        }}
        onBlurCallback={(key, val) => {
          //在 Input 失去焦点时触发
          row[column.property] = val;
          renderOpts.events.blur(row, column, key, val)
        }}
        onInputCallback={(key, val) => {
          // 在 Input 值改变时触发
          row[column.property] = val;
          renderOpts.events.input(row, column, key, val)
        }}
        onInputKeydown={(key, val) => {
          //键盘回车
          row[column.property] = val;
          renderOpts.events.inputKey(row, column, key, val)
        }}
      ></MyInput>
    ]
  },
  // 可编辑显示模板
  renderCell(h, renderOpts, { row, column }) {
    let names = row[column.property];
    return [
      <span>{names}</span>
    ]
  }
})

// 创建特定input渲染器
VXETable.renderer.add('myShowInput', {
  // 可编辑激活模板
  renderDefault(h, renderOpts, { row, column }) {
    let names = row[column.property];
    if (row.isEdit == false) {
      if (row.tipNameObj && row.tipNameObj[column.property]) {
        return [
          <span style="display: inline-block;width: 100%; min-height: 16px" title={row.tipNameObj[column.property]}>{names}</span>
        ]
      } else {
        return [
          <span>names</span>
        ]
      }
    } else {
      return [
        <MyInput
          ref={'showInputRef_' + column.property + '_' + renderOpts.props.which}
          which={renderOpts.props.which}
          modelKey={column.property}
          model={names}
          config={renderOpts.props.colConfig}
          disabled={renderOpts.props.colConfig.isDisabled}
          onChangeCallback={(key, val) => {
            // 仅在输入框失去焦点或用户按下回车时触发
            row[column.property] = val;
            renderOpts.events.change(row, column, key, val)
          }}
          onFocusCallback={(key, val) => {
            //在 Input 获得焦点时触发
            row[column.property] = val;
            renderOpts.events.focus(row, column, key, val)
          }}
          onBlurCallback={(key, val) => {
            //在 Input 失去焦点时触发
            row[column.property] = val;
            renderOpts.events.blur(row, column, key, val)
          }}
          onInputCallback={(key, val) => {
            // 在 Input 值改变时触发
            row[column.property] = val;
            renderOpts.events.input(row, column, key, val)
          }}
          onInputKeydown={(key, val) => {
            //键盘回车
            row[column.property] = val;
            renderOpts.events.inputKey(row, column, key, val)
          }}
        ></MyInput>
      ]
    }
  },
})
// 创建inputNumber渲染器
VXETable.renderer.add('myInputNumber', {
  // 可编辑激活模板
  renderEdit(h, renderOpts, { row, column }) {
    return [
      <MyInputNumber
        ref={'inputNumberRef_' + column.property + '_' + renderOpts.props.which}
        which={renderOpts.props.which}
        modelKey={column.property}
        model={row[column.property]}
        config={renderOpts.props.colConfig}
        disabled={renderOpts.props.colConfig.isDisabled}
        onChangeCallback={(key, val) => {
          //在 Input 值改变时触发
          row[column.property] = val;
          renderOpts.events.change(row, column, key, val)
        }}
        onFocusCallback={(key, val) => {
          //在 Input 获得焦点时触发
          row[column.property] = val;
          renderOpts.events.focus(row, column, key, val)
        }}
        onBlurCallback={(key, val) => {
          //在 Input 失去焦点时触发
          row[column.property] = val;
          renderOpts.events.blur(row, column, key, val)
        }}
      ></MyInputNumber>
    ]
  },
  // 可编辑显示模板
  renderCell(h, renderOpts, { row, column }) {
    let names = row[column.property];
    return [
      <span>{names}</span>
    ]
  }
})

// 创建selectTree渲染器
VXETable.renderer.add('mySelectTree', {
  // 可编辑激活模板
  renderEdit(h, renderOpts, { row, column }) {
    return [
      <MySelectTree
        ref={'selectTreeRef_' + column.property + '_' + renderOpts.props.which}
        which={renderOpts.props.which}
        modelKey={column.property}
        model={row[column.property]}
        config={renderOpts.props.colConfig}
        disabled={renderOpts.props.colConfig.isDisabled}
        onChangeCallback={(key, val, currentObj) => {
          row[column.property] = val;
          renderOpts.events.change(row, column, key, val, currentObj)
        }}
      ></MySelectTree>

    ]
  },
  // 可编辑显示模板
  renderCell(h, renderOpts, { row, column }) {
    let names = row[column.property];
    return [
      <span>{names}</span>
    ]
  }
})

// 创建select渲染器
VXETable.renderer.add('mySelect', {
  // 可编辑激活模板
  renderEdit(h, renderOpts, { row, column }) {
    return [
      <MySelect
        ref={'selectRef_' + column.property + '_' + renderOpts.props.which}
        which={renderOpts.props.which}
        modelKey={column.property}
        model={row[column.property]}
        config={renderOpts.props.colConfig}
        disabled={renderOpts.props.colConfig.isDisabled}
        onChangeCallback={(key, val, currentObj) => {
          row[column.property] = val;
          renderOpts.events.change(row, column, key, val, currentObj)
        }}
      ></MySelect>
    ]
  },
  // 可编辑显示模板
  renderCell(h, renderOpts, { row, column }) {
    let names = row[column.property];
    return [
      <span>{names}</span>
    ]
  }
})

//创建checkBox 渲染器 
VXETable.renderer.add('myCheckbox', {
  renderDefault(h, renderOpts, { row, column }) {
    return [
      <MyCheckbox
        ref={'checkboxRef_' + column.property + '_' + renderOpts.props.which}
        which={renderOpts.props.which}
        modelKey={column.property}
        model={row[column.property]}
        config={renderOpts.props.colConfig}
        disabled={renderOpts.props.colConfig.disabled}
        onChangeCallback={(key, val, currentObj) => {
          row[column.property] = val;
          renderOpts.events.change(row, column, key, val, currentObj)
        }}
      ></MyCheckbox>
    ]
  }
})

//创建radio渲染器
VXETable.renderer.add('myRadio', {
  renderDefault(h, renderOpts, { row, column }) {
    return [
      <MyRadio
        ref={'radioRef_' + column.property + '_' + renderOpts.props.which}
        which={renderOpts.props.which}
        modelKey={column.property}
        model={row[column.property]}
        config={renderOpts.props.colConfig}
        disabled={renderOpts.props.colConfig.disabled}
        onChangeCallback={(key, val) => {
          row[column.property] = val;
          renderOpts.events.change(row, column, key, val)
        }}
      ></MyRadio>
    ]
  }
})

//创建autocomplete的渲染器
VXETable.renderer.add('myAutoComplete', {
  // 可编辑激活模板
  renderEdit(h, renderOpts, { row, column }) {
    return [
      <MyAutoComplete
        ref={'autoCompleteRef_' + column.property + '_' + renderOpts.props.which}
        which={renderOpts.props.which}
        modelKey={column.property}
        model={row[column.property]}
        config={renderOpts.props.colConfig}
        disabled={renderOpts.props.colConfig.isDisabled}
        onChangeCallback={(key, val) => {
          //在 Input 值改变时触发
          row[column.property] = val;
          renderOpts.events.change(row, column, key, val)
        }}
      ></MyAutoComplete>
    ]
  },
  // 可编辑显示模板
  renderCell(h, renderOpts, { row, column }) {
    let names = row[column.property];
    return [
      <span>{names}</span>
    ]
  }
})

// 创建switch渲染器
VXETable.renderer.add('mySwitch', {
  renderDefault(h, renderOpts, { row, column }) {
    return [
      <MySwitch
        ref={'switchRef_' + column.property + '_' + renderOpts.props.which}
        which={renderOpts.props.which}
        modelKey={column.property}
        model={row[column.property]}
        config={renderOpts.props.colConfig}
        disabled={renderOpts.props.colConfig.disabled}
        onChangeCallback={(key, val) => {
          row[column.property] = val;
          renderOpts.events.change(row, column, key, val)
        }}
      ></MySwitch>
    ]
  }
})

// 创建datePicker渲染器
VXETable.renderer.add('myDatePicker', {
  // 可编辑激活模板
  renderEdit(h, renderOpts, { row, column }) {
    return [
      <MyDatePicker
        ref={'datePickerRef_' + column.property + '_' + renderOpts.props.which}
        which={renderOpts.props.which}
        modelKey={column.property}
        model={row[column.property]}
        config={renderOpts.props.colConfig}
        disabled={renderOpts.props.colConfig.isDisabled}
        onChangeCallback={(key, val, currentObj) => {
          row[column.property] = val;
          renderOpts.events.change(row, column, key, val, currentObj)
        }}
      ></MyDatePicker>
    ]
  },
  // 可编辑显示模板
  renderCell(h, renderOpts, { row, column }) {
    let names = row[column.property];
    return [
      <span>{names}</span>
    ]
  }
})

// 创建quarterDatepicker渲染器
VXETable.renderer.add('myQuarterDatepicker', {
  // 可编辑激活模板
  renderEdit(h, renderOpts, { row, column }) {
    return [
      <MyQuarterDatepicker
        ref={'quarterDatepickerRef_' + column.property + '_' + renderOpts.props.which}
        which={renderOpts.props.which}
        modelKey={column.property}
        model={row[column.property]}
        config={renderOpts.props.colConfig}
        disabled={renderOpts.props.colConfig.isDisabled}
        onChangeCallback={(key, val, currentObj) => {
          row[column.property] = val;
          renderOpts.events.change(row, column, key, val, currentObj)
        }}
      ></MyQuarterDatepicker>
    ]
  },
  // 可编辑显示模板
  renderCell(h, renderOpts, { row, column }) {
    let names = row[column.property];
    return [
      <span>{names}</span>
    ]
  }
})

// 创建icon渲染器
VXETable.renderer.add('myIcon', {
  renderDefault(h, renderOpts, { row, column }) {
    return [
      <MyIcon
        ref={'iconRef_' + column.property + '_' + renderOpts.props.which}
        which={renderOpts.props.which}
        modelKey={column.property}
        model={row[column.property]}
        config={renderOpts.props.colConfig}
      ></MyIcon>
    ]
  }
})

// 创建img渲染器  
VXETable.renderer.add('myImg', {
  renderDefault(h, renderOpts, { row, column }) {
    if (row.isVisiableImg != false) {
      return [
        <el-tooltip
          content={row.iconTipMsg}
          placement="top"
          effect="light"
          disabled={!row.iconTipMsg}
        >
          <el-image
            style={renderOpts.props.colConfig.styleName}
            src={renderOpts.props.colConfig.src || row.imgSrc}
            fit={renderOpts.props.colConfig.fit || 'cover'}//fill / contain / cover / none / scale-down
            class={renderOpts.props.colConfig.className}
          ></el-image>
        </el-tooltip>
      ]
    }
  }
})

// 创建一个简单提示文本渲染器
VXETable.renderer.add('myTooltipText', {
  // 显示模板
  renderDefault(h, renderOpts, { row, column }) {
    let className = 'pointer ' + renderOpts.props.colConfig.className
    let timeConsumVOData = row.timeConsumVO && row.timeConsumVO.length > 0 ? row.timeConsumVO : []
    return [
      <el-popover
        placement={renderOpts.props.colConfig.placement || "top-start"}// top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end
        width={renderOpts.props.colConfig.width}
        trigger={renderOpts.props.colConfig.trigger || "hover"}//click/focus/hover/manual
        title={renderOpts.props.colConfig.title}
      >
        <div class="overflowH">
          {
            timeConsumVOData.length > 0 ?
              timeConsumVOData.map(item => {
                let iconStyle = "display: inline-block;width: 8px; height: 8px; border-radius: 8px;"
                if (item.consumMinute) {
                  iconStyle += "background-color: #ffb700;"
                } else {
                  iconStyle += "background-color: #b2b2b2;"
                }
                return <div class="">
                  <span class="mr5" style={iconStyle}></span>
                  <span class="mr5">{item.name}</span>
                  <span style="color: #ffb700">{item.consumMinute}</span>
                </div>
              })
              :
              renderOpts.props.colConfig.content || row[column.property] || ""
          }
        </div>
        <span class={className} slot="reference" style={"height: 20px;line-height: 24px; display: inline-block; overflow: hidden; text-overflow: ellipsis;"}>{row[column.property]}</span>
      </el-popover>
    ]
  }
})

//json的显示
VXETable.renderer.add('myJsonList', {
  // 可编辑激活模板
  renderDefault(h, renderOpts, { row, column }) {
    let arraylist = XEUtils.isArray(row[column.property]) ? row[column.property] : [];
    let labelval = renderOpts.props.colConfig.props.label;
    return [
      <div>
        <ul class={renderOpts.props.colConfig.className}>
          {
            arraylist && arraylist.length > 0 ?
              arraylist.map(item => {
                return <li class={"cursorP"} onClick={() => {
                  // console.log(7777, item)
                  renderOpts.props.colConfig.clickFun &&
                    renderOpts.props.colConfig.clickFun(column.property + "_" + renderOpts.props.colConfig.props.which, item, row, column);
                }}>{item[labelval]}</li>
              })
              : ''
          }
        </ul>
      </div>
    ]
  },
})

// 创建一个空数据渲染
VXETable.renderer.add('myEmptyData', {
  renderEmpty(h, renderOpts, { $table }) {
    let con = renderOpts.props.content
    const tipMsg = con || '暂无数据'
    return [
      <p>{tipMsg}</p>
    ]
  },
})




